<template>
	<view class="my" :style="{ paddingTop: StatusBar + 'px' }">
		<view class="my_header">
			<view class="header_setting">
				<text class="iconfont icon-shezhi" @click="navigateTo('setting')"></text>
			</view>
			<view class="header_message">
				<view class="message_image">
					<image :src="details_data.img" mode=""></image>
				</view>
				<view class="message_content">
					<view class="content_name">{{details_data.name}}</view>
					<view class="content_uid">
						<view class="uid_icon"></view>
						<view class="uid_text">{{details_data.id}}</view>
					</view>
				</view>
			</view>
			<view class="header_btn">
				<view class="btn_item"  @click="navigateTo('collect')">
					<view class="item_icon"></view>
					<view class="item_text">收藏</view>
				</view>
				<view class="btn_item" @click="navigateTo('browse')">
					<view class="item_icon"></view>
					<view class="item_text">足迹</view>
				</view>
			</view>
			<view class="header_activity">
				<view class="activity_message">
					<view class="message_price">
						<text>￥</text>
						<text>30</text>
					</view>
					<view class="message_tips">无门槛券</view>
					<view class="message_title">优惠券</view>
				</view>
				<view class="activity_btn">
					<view class="btn_box">立即领取</view>
				</view>
			</view>
		</view>
		<view>
			<view class="user_tab_box">
				<view class="tab_title">我是卖家</view>
				<view class="tab_list_box">
					<view class="list_item" v-for="(item, index) in textList" @click="navigateTo(item.path)" :key="index">
						<image class="icon" :src="item.url" mode=""></image>
						<view class="text">{{ item.text }}</view>
					</view>
				</view>
			</view>
			<view class="user_tab_box">
				<view class="tab_title">我是买家</view>
				<view class="tab_list_box">
					<view class="list_item" v-for="(item, index) in textList2" @click="navigateTo(item.path)" :key="index">
						<image class="icon" :src="item.url" mode=""></image>
						<view class="text">{{ item.text }}</view>
					</view>
				</view>
			</view>
			<view class="loan_box">
				<view class="loan_title_box">
					<view class="tab_title">更多服务</view>
				</view>
				<view class="loan_list">
					<view class="list_item" @click="navigateTo(item.path)" v-for="(item, index) in productList" :key="index">
						<view class="item_bottom">
							<view class="bottom_item">
								<view class="item_image">
									<image :src="item.url" mode="widthFix"></image>
								</view>
								<view class="names">{{ item.text }}</view>
							</view>

							<view class="bottom_item">
								<view class="notice_more">
									<text class="iconfont icon-Right"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<k-tabbar />
	</view>
</template>

<script>
import { user_details } from '@/api/user'
export default {
	data() {
		return {
			details_data: {},
			textList: [
				// {
				// 	text: '发布商品',
				// 	url: require('../../static/my/icon_发布商品@2x.png'),
				// 	path: 'information'
				// },
				{
					text: '全部商品',
					url: require('../../static/my/icon_全部商品@2x.png'),
					path: 'all_goods'
				},
				// {
				// 	text: '收到砍价',
				// 	url: require('../../static/my/icon_收到砍价@2x.png'),
				// 	path: 'bargaining'
				// },
				{
					text: '审核中',
					url: require('../../static/my/icon_审核中@2x.png'),
					path: 'all_goods'
				},
				{
					text: '交易中',
					url: require('../../static/my/icon_交易中@2x.png'),
					path: 'all_goods'
				},
				{
					text: '已出售',
					url: require('../../static/my/icon_已出售@2x.png'),
					path: 'all_goods'
				}
			],
			textList2: [
				{
					text: '我的订单',
					url: require('../../static/my/icon_我的订单@2x.png'),
					path: 'buy_order'
				},
				{
					text: '待支付',
					url: require('../../static/my/icon_待支付@2x.png'),
					path: 'buy_order'
				},
				// {
				// 	text: '我的出价',
				// 	url: require('../../static/my/icon_我的出价@2x.png'),
				// 	path: 'all_goods'
				// },
				{
					text: '交易中',
					url: require('../../static/my/icon_交易中@2x.png'),
					path: 'buy_order'
				},
				{
					text: '已成交',
					url: require('../../static/my/icon_已成交@2x.png'),
					path: 'buy_order'
				},
				{
					text: '已取消',
					url: require('../../static/my/icon_已取消@2x.png'),
					path: 'buy_order'
				}
			],
			productList: [
				{
					text: '我的合同',
					url: require('../../static/my/ht.png')
				},
				{
					text: '实名认证',
					url: require('../../static/my/sm.png'),
					path: 'certification'
				},
				{
					text: '商务合作',
					url: require('../../static/my/swhz.png')
				},
				{
					text: '售后中心',
					url: require('../../static/my/shzx.png')
				},
				{
					text: '我的推广',
					url: require('../../static/my/tg.png'),
					path: 'promotion'
				},
				{
					text: '投诉建议',
					url: require('../../static/my/ts.png'),
					path: 'complaints'
				}
			]
		};
	},
	onShow(){
		this.user_details()
		
	},
	methods: {
		async user_details(){
			let data = await user_details()
			if(data){
				this.details_data = data.data
			}
		}
	}
};
</script>

<style>
page {
	background: linear-gradient(197deg, #fffabe 0%, #fffde2 15%, #f7f8fa 100%);
	padding-bottom: 166rpx;
}

</style>
<style lang="scss" scoped>
	
.my_header {
	background: url(@/static/my/kka.png) no-repeat;
	background-position: 374rpx 60rpx;
	background-size: 50%;
	.header_setting {
		margin-top: 22rpx;
		display: flex;
		justify-content: flex-end;
		padding: 0 54rpx;
		box-sizing: border-box;
		.iconfont {
			font-size: 44rpx;
			font-weight: bold;
			color: #09244b;
		}
	}
	.header_message {
		padding: 0 60rpx;
		display: flex;
		align-items: center;
		.message_image {
			width: 108rpx;
			height: 108rpx;
			border: 4rpx solid #ffdb67;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.message_content {
			margin-left: 24rpx;
			.content_name {
				font-size: 28rpx;
				color: #000000;
				font-weight: bold;
			}
			.content_uid {
				display: flex;
				margin-top: 4rpx;
				.uid_icon {
					width: 48rpx;
					height: 48rpx;
					background: url(~@/static/my/guaishou.png) no-repeat;
					background-size: 100%;
					z-index: 999;
				}
				.uid_text {
					font-size: 20rpx;
					color: #22150b;
					font-weight: bold;
					padding: 6rpx 24rpx;
					background: rgba(255, 255, 255, 0.56);
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					margin-left: -20rpx;
				}
			}
		}
	}
	.header_btn {
		box-sizing: border-box;
		padding: 20rpx 84rpx;
		display: flex;
		.btn_item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-right: 132rpx;
			.item_text {
				margin-top: 6rpx;
				font-size: 24rpx;
				color: #22150b;
			}
			&:nth-child(1) {
				.item_icon {
					margin-top: -4rpx;
					width: 44rpx;
					height: 44rpx;
					background: url(~@/static/my/shoucang.png) no-repeat;
					background-size: 100%;
				}
			}
			&:nth-child(2) {
				.item_icon {
					width: 40rpx;
					height: 40rpx;
					background: url(~@/static/my/zuji.png) no-repeat;
					background-size: 100%;
				}
				.item_text {
					margin-top: 10rpx;
				}
			}
		}
	}
	.header_activity {
		margin: 20rpx 28rpx;
		height: 170rpx;
		background: url(~@/static/my/youhuiquan.png) no-repeat;
		background-size: 100%;
		overflow: hidden;
		.activity_message {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			.message_price {
				margin-left: 80rpx;
				display: flex;
				align-items: flex-end;
				text {
					&:nth-child(1) {
						font-size: 28rpx;
					}
					&:nth-child(2) {
						font-size: 52rpx;
						line-height: 52rpx;
					}
					font-weight: bold;
					color: #fff;
				}
			}
			.message_tips {
				margin-left: 58rpx;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #ffffff;
			}
			.message_title {
				font-weight: bold;
				margin-left: 94rpx;
				font-size: 36rpx;
				line-height: 36rpx;
				color: #fff;
			}
		}
		.activity_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			.btn_box {
				width: 216rpx;
				height: 70rpx;
				background: url(~@/static/my/lyhj.png) no-repeat;
				background-size: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
}

.tab_title {
	font-weight: 800;
	font-size: 28rpx;
	color: #22150b;

	text-align: left;
	font-style: normal;
	text-transform: none;
	background-image: url(../../static/my/下划线_我是卖家.png);

	background-repeat: no-repeat;
	width: 150rpx;
	line-height: 40rpx;
	height: 40rpx;
	background-size: cover;
}
.user_tab_box {
	background-color: #fff;
	width: 90%;
	margin: 20rpx auto;
	border-radius: 10rpx;
	padding: 10rpx 20rpx;
	padding-bottom: 20rpx;
	box-sizing: border-box;

	.tab_list_box {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		.list_item {
			width: 33%;
			text-align: center;
			margin: 20rpx 0;
			.icon {
				height: 80rpx;
				width: 80rpx;
			}
			.text {
				color: #22150b;
				line-height: 28rpx;
				font-weight: 500;
				font-style: normal;
				text-transform: none;
				margin-top: -10rpx;
				margin-top: 4rpx;
				font-size: 24rpx;
			}
		}
	}
}
.loan_box {
	background-color: #fff;
	width: 90%;
	margin: 20rpx auto;
	border-radius: 10rpx;
	padding: 10rpx 20rpx;
	padding-bottom: 20rpx;
	box-sizing: border-box;

	.loan_list {
		margin-top: 30rpx;
		.list_item {
			padding: 0 10rpx;

			.item_bottom {
				display: flex;
				margin-top: 20rpx;
				padding-bottom: 5rpx;
				width: 100%;
				justify-content: space-between;
				.bottom_item {
					display: flex;
					align-items: center;
					.item_image {
						width: 64rpx;
						height: 64rpx;
						overflow: hidden;
						image {
							width: 100%;
						}
					}

					.names {
						font-weight: 500;
						font-size: 24rpx;
						color: #22150b;
						line-height: 45rpx;
						margin-left: 20rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.iconfont {
						margin-left: 8rpx;
						font-size: 14rpx;
						font-weight: bold;
						color: #aeaeae;
					}
				}
			}
		}
	}
}
</style>
